<div class="card mb-4">
  <div class="card-body">
    <div class="row mb-3">
      <div class="col-6">
        <%= f.spree_select :status,
                           available_status_options(@product),
                           { selected: @product.status, help_bubble: show_product_status_help_bubble? ? Spree.t('admin.products.status_form.status') : nil },
                           { data: {
                               action: 'change->product-form#switchAvailabilityDatesFields',
                               'product-form-target': 'status'
                             }
                           } %>
      </div>
      <div class="col-6 <%= 'd-none' if @product.active? %>" data-product-form-target="makeActiveAt">
        <% if can?(:activate, @product) %>
          <%= f.spree_datetime_field :make_active_at,
                                     help_bubble: Spree.t('admin.products.status_form.make_active_at'),
                                     max: @product.discontinue_on %>
        <% end %>
      </div>
    </div>
    <div class="row">
      <div data-product-form-target="availableOn" class="col-6">
        <%= f.spree_datetime_field :available_on,
                                   help_bubble: Spree.t('admin.products.status_form.available_on'),
                                   max: @product.discontinue_on %>
      </div>
      <div data-product-form-target="discontinueOn" class="col-6">
        <%= f.spree_datetime_field :discontinue_on,
                                   help_bubble: Spree.t('admin.products.status_form.discontinue_on'),
                                   min: @product.make_active_at %>
      </div>
    </div>
  </div>
</div>
